<!-- interviewindex.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .conversation {
            margin-bottom: 20px;
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .user, .assistant {
            margin: 5px 0;
        }
        .user {
            color: blue;
        }
        .assistant {
            color: green;
        }
        .evaluation {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>AI面试官</h1>
    <div id="conversation" class="conversation"></div>
    <input type="text" id="userInput" placeholder="请输入你的回答">
    <button onclick="sendUserInput()">发送</button>
    <div id="evaluation" class="evaluation"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script>
        const socket = io();

        socket.on('connect', () => {
            console.log('Connected to server');
            startInterview('3', '1');
        });

        function startInterview(resumeId, jobId) {
            socket.emit('start_interview', { resume_id: resumeId, job_id: jobId });
        }

        socket.on('new_message', (data) => {
            displayMessage(data.role, data.content);
        });

        socket.on('evaluation_report', (data) => {
            displayEvaluation(data.report);
        });

        function displayMessage(role, content) {
            const conversationDiv = document.getElementById('conversation');
            const messageElement = document.createElement('div');
            messageElement.className = role;
            messageElement.textContent = `${role}: ${content}`;
            conversationDiv.appendChild(messageElement);
            conversationDiv.scrollTop = conversationDiv.scrollHeight;  // 自动滚动到底部
        }

        function displayEvaluation(evaluationReport) {
            const evaluationDiv = document.getElementById('evaluation');
            evaluationDiv.innerHTML = `<pre>${evaluationReport}</pre>`;
        }

        function sendUserInput() {
            const userInput = document.getElementById('userInput').value;
            if (userInput.trim() === '') {
                alert('请输入你的回答');
                return;
            }
            displayMessage('user', userInput);
            socket.emit('user_input', { content: userInput });
            document.getElementById('userInput').value = '';  // 清空输入框
        }
    </script>
</body>
</html>
